<template>
    <div class="tab">
        <div class="hd">
            <ul class="clearfix">
                <li v-for="(item, index) in list" :key="index" :class="{active:selected==index, item:true}" @mouseenter="change(index)">{{item.title}}</li>
            </ul>
        </div>
        <div class="bd">
            <div v-for="(item, index) of list" :key="index" :class="{active:selected==index, item:true}" v-html="item.content"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "v-tab",
        data(){
            return{
                selected:0
            }
        },
        methods : {
            change(index){
                this.selected = index;
            }
        }
    }
</script>

<style scoped>

</style>
